<template>
  <div id="app">
    <qq-music-header></qq-music-header>
    <qq-music-nav :isGreen="num"></qq-music-nav>
    <div class="songerclass">
      <div class="classABC">
        <a
          href="javascript:;"
          :class="[{ first: isFirst == 0 }]"
          @click="get0()"
          >热门</a
        >
        <a
          href="javascript:;"
          v-for="item in ABC"
          :key="item.id"
          :class="[{ first: isFirst == item.id }]"
          @click="getABC(item.id, item.initial)"
        >
          {{ item.first }}
        </a>
      </div>
      <div class="classarea">
        <a
          href="javascript:;"
          :class="[{ first: isFirst1 == 0 }]"
          @click="get1()"
          >全部</a
        >
        <a
          href="javascript:;"
          v-for="item in areas"
          :key="item.id"
          :class="[{ first: isFirst1 == item.id }]"
          @click="getarea(item.id, item.area)"
          >{{ item.first }}</a
        >
      </div>
      <div class="classtype">
        <a
          href="javascript:;"
          :class="[{ first: isFirst2 == 0 }]"
          @click="get2()"
          >全部</a
        >
        <a
          href="javascript:;"
          v-for="item in types"
          :key="item.id"
          :class="[{ first: isFirst2 == item.id }]"
          @click="gettype(item.id, item.type)"
        >
          {{ item.first }}
        </a>
      </div>
    </div>
    <div class="allsonger">
      <a
        href="javascript:;"
        v-for="item in songerlist"
        :key="item.id"
        @click="getsonger(item.id,item.name)"
        >{{ item.name }}</a
      >
    </div>
  </div>
</template>
<script>
import QqMusicHeader from "@/components/header";
import QqMusicNav from "@/components/nav";

export default {
  components: {
    "qq-music-header": QqMusicHeader,
    "qq-music-nav": QqMusicNav,
  },
  data() {
    return {
      initial: -1,
      area: -1,
      type: 1,
      isFirst: 0,
      isFirst1: 0,
      isFirst2: 0,
      num: 2,
      songerlist: [],
      ABC: [
        { first: "A", id: 1, initial: "a" },
        { first: "B", id: 2, initial: "b" },
        { first: "C", id: 3, initial: "c" },
        { first: "D", id: 4, initial: "d" },
        { first: "E", id: 5, initial: "e" },
        { first: "F", id: 6, initial: "f" },
        { first: "G", id: 7, initial: "g" },
        { first: "H", id: 8, initial: "h" },
        { first: "I", id: 9, initial: "i" },
        { first: "G", id: 10, initial: "j" },
        { first: "K", id: 11, initial: "k" },
        { first: "L", id: 12, initial: "l" },
        { first: "M", id: 13, initial: "m" },
        { first: "N", id: 14, initial: "n" },
        { first: "O", id: 15, initial: "o" },
        { first: "P", id: 16, initial: "p" },
        { first: "Q", id: 17, initial: "q" },
        { first: "R", id: 18, initial: "r" },
        { first: "S", id: 19, initial: "s" },
        { first: "T", id: 20, initial: "t" },
        { first: "U", id: 21, initial: "u" },
        { first: "V", id: 22, initial: "v" },
        { first: "W", id: 23, initial: "w" },
        { first: "X", id: 24, initial: "x" },
        { first: "Y", id: 25, initial: "y" },
        { first: "Z", id: 26, initial: "z" },
        { first: "#", id: 27, initial: "0" },
      ],
      areas: [
        { first: "华语", id: 31, area: 7 },
        { first: "欧美", id: 32, area: 96 },
        { first: "日本", id: 33, area: 8 },
        { first: "韩国", id: 34, area: 16 },
        { first: "其他", id: 35, area: 0 },
      ],
      types: [
        { first: "男", id: 41, type: 1 },
        { first: "女", id: 42, type: 2 },
        { first: "乐队", id: 43, type: 3 },
      ],
    };
  },
  methods: {
    getsonger:function(id,name){
      this.$router.push("singer");
      this.$store.commit('getId',id)
      this.$store.commit('getName',name)
    },
    getallsonger: async function () {
      let res = await this.$http.get("/artist/list", {
        params: {
          limit: 50,
          initial: this.initial,
          type: this.type,
          area: this.area,
        },
      });
      this.songerlist = res.data.artists;
      // console.log(res);
    },

    getABC: function (num, initial) {
      this.isFirst = num;
      this.initial = initial;
      this.getallsonger();
    },
    getarea: function (num, area) {
      this.isFirst1 = num;
      this.area = area;
      this.getallsonger();
    },
    gettype: function (num, type) {
      this.isFirst2 = num;
      this.type = type;
      this.getallsonger();
    },
    get0: function () {
      this.initial = -1;
      this.isFirst = 0;
      this.getallsonger();
    },
    get1: function () {
      this.area = -1;
      this.isFirst1 = 0;
      this.getallsonger();
    },
    get2: function () {
      this.type = -1;
      this.isFirst2 = 0;
      this.getallsonger();
    },
  },
  mounted() {
    this.getallsonger();
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
#app {
  .songerclass {
    width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
    .classABC {
      margin-bottom: 20px;
      a {
        margin-left: 10px;
        font-weight: 300;
        text-align: center;
        display: inline-block;
        padding: 0 8px;
        height: 24px;
        line-height: 24px;
        text-decoration: none;
        color: #000;
      }
      a:hover {
        color: #31c27c;
      }
      .first {
        text-align: center;
        color: #fff;
        background: #31c27c;
      }
      .first:hover {
        color: #fff;
      }
    }
    .classarea {
      margin-bottom: 20px;
      a {
        margin-left: 10px;
        font-weight: 300;
        text-align: center;
        display: inline-block;
        padding: 0 8px;

        height: 24px;
        line-height: 24px;
        text-decoration: none;
        margin-right: 10px;
        color: #000;
      }
      a:hover {
        color: #31c27c;
      }
      .first {
        text-align: center;
        color: #fff;
        background: #31c27c;
      }
      .first:hover {
        color: #fff;
      }
    }
    .classtype {
      margin-bottom: 20px;
      a {
        margin-left: 10px;
        font-weight: 300;
        text-align: center;
        display: inline-block;
        padding: 0 8px;
        height: 24px;
        line-height: 24px;
        text-decoration: none;
        margin-right: 10px;
        color: #000;
      }
      a:hover {
        color: #31c27c;
      }
      .first {
        text-align: center;
        color: #fff;
        background: #31c27c;
      }
      .first:hover {
        color: #fff;
      }
    }
  }
  .allsonger {
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 30px;
    a {
      font-weight: 300;
      width: 240px;
      height: 40px;
      line-height: 40px;
      display: inline-block;
      text-decoration: none;
      color: #000;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    a:hover {
      color: #31c27c;
    }
  }
}
</style>